<template>
    <div class="py-2 px-4 flex flex-1 flex-col overflow-hidden">
        <div class="methods">
            <div
                v-for="(item, index) in methodList"
                :key="index"
                class="method-item"
                :class="item.type === currentTab ? 'active' : ''"
                @click="currentTab = item.type"
            >
                <div class="flex items-center">
                    <icon name="el-icon-MessageBox" size="20" />
                    <strong class="mx-4">{{ item.name }}</strong>
                </div>
                <div class="tips">{{ item.tips }}</div>
            </div>
        </div>

        <component
            :is="componentMap[currentTab]"
            :kb="know.code"
            @retreat="emits('toRow', 'archive')"
        />
    </div>
</template>

<script setup lang="ts">
import doc from './import/doc.vue'
import csv from './import/csv.vue'
import txt from './import/txt.vue'
import web from './import/web.vue'

const emits = defineEmits(['toRow'])
withDefaults(
    defineProps<{
        know: KnowManageDetailResponse;
    }>(),
    {}
)

const currentTab = ref<string>('doc')
const methodList = [
    {
        type: 'doc',
        icon: '',
        name: '本地文档',
        tips: '上传 PDF、TXT、DOCX 等格式的文件'
    },
    {
        type: 'csv',
        icon: '',
        name: '表格文档',
        tips: '一问一答导入, 准确性更佳'
    },
    {
        type: 'txt',
        icon: '',
        name: '手动录入',
        tips: '手动输入一段文本作为数据集'
    },
    {
        type: 'web',
        icon: '',
        name: '网页链接',
        tips: '读取静态网页内容作为数据集'
    }
]

// 组件地图
const componentMap: any = {
    doc,
    csv,
    txt,
    web
}
</script>

<style scoped lang="scss">
.methods {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--el-border-color-extra-light);
    .method-item {
        box-sizing: content-box !important;
        display: flex;
        flex-direction: column;
        width: calc(33% - 40px);
        max-width: 330px;
        height: 60px;
        padding: 10px;
        margin: 10px;
        cursor: pointer;
        border: 1px solid #e5e5e5;
        border-radius: 8px;
        .tips {
            margin-top: 10px;
            margin-left: 34px;
            overflow: hidden;
            font-size: 13px;
            color: #7f7d7d;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        &.active {
            background-color: #e7f2fe !important;
            border: 1px solid #3370ff;
        }
    }
}
</style>